<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="icon" href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/signin/">

<title>Signin Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.10/examples/signin/signin.css" rel="stylesheet">
<style>
    .alert {
        position: absolute;
        width: 100%;
        text-align: center;
        display: none;
    }
    
    .container {
        padding-top: 60px;
    }
    
    #btns {
        height: 100%;
        background-color: aqua;
        width: 100%;
        background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1c3e97686468231f3f78048d7f2b7fdc.jpg?thumb=1&w=1533&h=575&f=webp&q=90);
    }
    
    #btnsb {
        height: 600px;
        width: 1000px;
    }
    
    .container {
        margin-left: 500px;
    }
</style>

<body>
    <div id="btns">
        <div class="alert alert-success" id="login_tip">这是一个提示</div>
        <div class="container" id="btnsb">

            <form action="javascript:void(0)" class="form-signin" class="form-horizontal col-md-4 col-md-offset-4">
                <h2 class="form-signin-heading">请登录</h2>
                <div class="form-group">
                    <label for="username" class="control-label">用户名</label>
                    <input type="text" id="username" class="form-control" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="control-label">密码</label>
                    <input type="text" class="form-control" autocomplete="off" id="password">
                </div>
                <button class="btn btn-lg btn-primary btn-block" id="btn">登录</button>
            </form>
        </div>
    </div>
</body>
<script src="./javascripts/ajax-promise.js"></script>
<script src="./javascripts/cookie.js"></script>
<script>
    var btn = document.getElementById("btn");
    var username = document.getElementById("username");
    var password = document.getElementById("password");
    btn.onclick = async function() {
        var options = {
            url: "http://127.0.0.1:8888/users/login",
            type: "POST",
            data: {
                username: username.value,
                password: password.value
            }
        }
        let data = await ajax_promise(options)
        data = JSON.parse(data)
            //用switch定义code情况
        switch (data.code) {
            case 0:
                errorTip(data.message)
                break;
            case 1:
                successTip(data.message)
                setTimeout(function() {
                        location.href = "./index.html"
                    }, 2000)
                    //登录成功之后获取存储的id
                setCookie("userid", data.user.id)
                setCookie("token", data.token, {
                    export: 1
                })
                break;

        }

    }
    var login_tip = document.getElementById("login_tip");

    function errorTip(msg) {
        login_tip.style.display = "block"
        login_tip.classList.remove("alert-success");
        login_tip.classList.add("alert-danger")
        login_tip.innerHTML = msg;
        setTimeout(function() {
            login_tip.style.display = "none"
        }, 2000)
    }

    function successTip(msg) {
        login_tip.classList.remove("alert-danger");
        login_tip.classList.add("alert-success");
        login_tip.style.display = "block";
        login_tip.innerHTML = msg
        setTimeout(function() {
            login_tip.style.display = "none"
        }, 2000)
    }
</script>
<script src="./libs/javascripts/jQuery.js"></script>
<script src="./libs/javascripts/cookis.js"></script>

</html>